<template>
  <div class="rightInfo custom-select-container">
    <div class="airport-select-container">
      <!-- 预测星座 -->
      <div class="select-item">
        <label>预测星座</label>
        <el-select
          v-model="optionsListSatsysDefault4"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListSatsys"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>

      <!-- 预测仰角 -->
      <div class="select-item">
        <label>预测仰角（度）</label>
        <el-select
          v-model="optionsListAngleDefault4"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListAngle"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>

      <!-- 算法 -->
      <div class="select-item">
        <label>算法</label>
        <el-select
          v-model="optionsListAlgorithmDefault4"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in optionsListAlgorithm"
            :key="item.id"
            :label="item.desc"
            :value="item.id"
          />
        </el-select>
      </div>

      <!-- 开始时间 -->
      <div class="select-item">
        <label>请选择开始时间（UTC）</label>
        <el-date-picker
          :show-now="false"
          v-model="handleAreaStartTime"
          type="datetime"
          placeholder=""
          class="custom-datetime-picker"
        />
      </div>

      <!-- 结束时间 -->
      <div class="select-item">
        <label>请选择结束时间（UTC）</label>
        <el-date-picker
          :show-now="false"
          v-model="handleAreaEndTime"
          type="datetime"
          placeholder=""
          class="custom-datetime-picker"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from "vue";

// 定义接收的参数（统一通过defaultFormData传入）
const props = defineProps({
  // 下拉列表数据源
  optionsListSatsys: {
    type: Array,
    default: () => [],
  },
  optionsListAngle: {
    type: Array,
    default: () => [],
  },
  optionsListAlgorithm: {
    type: Array,
    default: () => [],
  },
  // 表单默认数据（统一管理）
  defaultFormData: {
    type: Object,
    default: () => ({
      optionsListSatsysDefault4: "",
      optionsListAngleDefault4: "",
      optionsListAlgorithmDefault4: "",
      handleAreaStartTime: null,
      handleAreaEndTime: null,
    }),
  },
});

// 组件内部状态（基于defaultFormData初始化）
const optionsListSatsysDefault4 = ref(
  props.defaultFormData.optionsListSatsysDefault4
);
const optionsListAngleDefault4 = ref(
  props.defaultFormData.optionsListAngleDefault4
);
const optionsListAlgorithmDefault4 = ref(
  props.defaultFormData.optionsListAlgorithmDefault4
);
const handleAreaStartTime = ref(props.defaultFormData.handleAreaStartTime);
const handleAreaEndTime = ref(props.defaultFormData.handleAreaEndTime);

// 计算属性：整合表单数据
const formData = computed(() => ({
  optionsListSatsysDefault4: optionsListSatsysDefault4.value,
  optionsListAngleDefault4: optionsListAngleDefault4.value,
  optionsListAlgorithmDefault4: optionsListAlgorithmDefault4.value,
  handleAreaStartTime: handleAreaStartTime.value,
  handleAreaEndTime: handleAreaEndTime.value,
}));

// 定义事件（同步表单数据到父组件）
const emit = defineEmits(["update:formData"]);

// 监听表单变化，实时同步到父组件
watch(
  formData,
  (newData) => {
    emit("update:formData", newData);
  },
  { deep: true, immediate: true } // immediate确保初始化时同步一次
);
</script>

<style scoped lang="scss">
.airport-select-container {
  padding: 0 1px;
  height: auto;
  height: calc(100vh - 212px);
  overflow-y: auto;
  box-sizing: border-box;
}
.select-item {
  margin-bottom: 12px;
}
.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}

/* 滚动条样式 */
.airport-select-container::-webkit-scrollbar {
  width: 4px;
}
.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}
.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}
.el-select-dropdown__item {
  font-size: 12px;
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
}

.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}

.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}
</style>
